<template>
  <div class="switch-work-space">
      <span
        v-for="(space, index) in conf.workSpaces"
        :index="index"
        :style="getSpanStyle(index, space)"
        :class="{active: conf.currentWorkspace && space.name === conf.currentWorkspace.name}"
        @click="conf.setDevWorkspace(space)"
      >{{space.dto.name}}</span>
  </div>
</template>
<script>
  export default {
    name: 'home',
    props: ["conf"],
    data() {return {}},
    computed: {},
    mounted() {},
    methods: {
      getSpanStyle(index, space){
        const cur = this.conf.workSpaces.indexOf(this.conf.currentWorkspace);
        const len = Math.floor(this.conf.workSpaces.length) ;
        const deg = (90 / len) * (index - cur);
        return {
          backgroundImage: `url(${space.dto.imgUrl})`,
          transform: `rotateX(${deg + deg / 3}deg) rotateY(${25 - deg/2}deg) translateZ(${160+deg}px) translateX(-${160 + deg / 2}px)`,
        }
      },
    },
    watch: {},
  }
</script>

<style scoped>
  .switch-work-space {
    position: relative;
    flex: 0 0 200px;
    padding: 10px;
    border-radius: 4px;
    perspective: 300px;
  }

  .switch-work-space > span {
    color: #fff;
    background-size: cover;
    background-position: center center;
    background-color: rgba(255, 255, 255, 1);
    position: absolute;
    backface-visibility:hidden;
    top: 50%;
    left: 50%;
    display: block;
    padding: 0 10px;
    line-height: 30px;
    height: 30px;
    min-width: 120px;
    text-align: left;
    cursor: pointer;
    transition: all .3s;
    transform: scale(.9, .9);
    border-radius: 4px;
  }

  .switch-work-space > span:hover {
    background-color: rgba(255, 255, 255, .8);
  }

  .switch-work-space > span:active {
    transform: scale(1, 1);
  }

  .switch-work-space > span.active {
    background-color: #2870ba;
    color: #fff;
  }
</style>
